<template>
  <div>
    <DetaillHeader :name='bannername'></DetaillHeader>
    <DetaillBanner :img='bannerImg' :name='bannername' :list='bannerImgs'></DetaillBanner>
    <div class="content">
     <list :list='bannerList'></list>
    </div>
 </div>
</template>

<script>
import DetaillBanner from "./components/banner";
import DetaillHeader from "./components/detaillHeader";
import list from "./components/List";
import axios from "axios";
export default {
  data() {
    return {
      bannerImg:'',
      bannername:'',
      bannerImgs:[],
      bannerList:[],
    };
  },
  components: { DetaillBanner, DetaillHeader ,list},
  mounted() {
    this.getbannerData();
  },
  methods: {
    getbannerData() {
      axios.get("../../../static/mork/detail.json").then(res => {
        console.log(res.data.data);
        this.bannerImg=res.data.data.bannerImg;
        this.bannername=res.data.data.sightName;
        this.bannerImgs=res.data.data.gallaryImgs;
        this.bannerList=res.data.data.categoryList
      });
    }
  }
};
</script>

<style lang='stylus' scoped>
  .content
    height : 50rem
</style>
